﻿@page
@model TestApp.BookStore.Web.Pages.IndexModel
@using TestApp.BookStore.Web.Menus
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@using Microsoft.AspNetCore.Mvc.Localization
@using TestApp.BookStore.Localization
@using Volo.Abp.Users
@inject IPageLayout PageLayout
@inject IHtmlLocalizer<BookStoreResource> L
@inject ICurrentUser CurrentUser
@{
    ViewBag.PageTitle = L["Home"];
    PageLayout.Content.MenuItemName = BookStoreMenus.Home;
}

@section styles {
    <abp-style src="/Pages/Index.css" />
}

<div class="row mb-3">
    <div class="col-xl-6 col-12 d-flex">
        <div class="card h-lg-100 w-100 overflow-hidden">
            <div class="card-body">
                <div class="starting-content pe-5">
                    @if (!CurrentUser.IsAuthenticated)
                    {
                        <h3>@L["Welcome"]</h3>
                        <p class="lead text-muted mb-2">@L["LongWelcomeMessage"]</p>
                        <a href="/Account/Login" class="btn btn-primary mb-4"><i class="fa-solid fa-right-to-bracket me-1"></i><span>@L["Login"]</span></a>
                    }
                </div>
                <img class="card-bg-image" src="/images/getting-started/bg-01.png">
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 d-flex">
        <div class="row">
            <div class="col-12 d-flex">
                <div class="card overflow-hidden mb-3">
                    <div class="card-body d-flex flex-column">
                        <div class="abp-support abp-logo mb-2"></div>
                        <img style="margin-bottom: -24px;" class="w-100 mt-auto" src="/images/getting-started/img-support.png">
                    </div>
                </div>
            </div>
            <div class="col-12 d-flex">
                <div class="card h-md-100 overflow-hidden">
                    <div class="card-body d-flex flex-column">
                        <div class="abp-blog abp-logo mb-2"></div>
                        <img style="margin-bottom: -24px;" class="w-100 mt-auto" src="/images/getting-started/img-blog.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 d-flex">
        <div class="card h-100 overflow-hidden">
            <div class="card-body">
                <div class="abp-community abp-logo mb-2"></div>
            </div>
            <img class="mt-3 w-100" src="/images/getting-started/img-community.png">
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xl-3 col-lg-4">
    </div>
    <div class="col-xl-6 col-lg-8 d-flex">
        <div class="card">
            <div class="card-body d-flex">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <div class="d-md-flex mb-2 mb-md-0">
                        </div>
                    </div>
                    <div class="col">
                        <img class="w-100" src="/images/getting-started/book.png">
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="col-xl-3 col-lg-4">
        <div class="card">
            <div class="card-header">
            </div>
            <div class="card-body pt-0">
                <div>
                    <table class="table mb-0">
                        <tbody>
                            <tr>
                                <td class="ps-0 d-flex">
                                    <img src="" class="me-2" style="background-color: black;">

                                </td>
                                <td class="text-end pe-0 opacity-25">
                                </td>
                            </tr>
                            <tr>
                                <td class="ps-0 d-flex">
                                    <img src="" class="me-2">
                                </td>
                                <td class="text-end pe-0 opacity-25">
                                </td>
                            </tr>
                            <tr>
                                <td class="ps-0 d-flex">
                                    <img src="" class="me-2">
                                </td>
                                <td class="text-end pe-0 opacity-25">
                                </td>
                            </tr>
                            <tr>
                                <td class="ps-0 d-flex">
                                    <img src="" class="me-2">

                                </td>
                                <td class="text-end pe-0 opacity-25">
                                </td>
                            </tr>
                            <tr>
                                <td class="ps-0 d-flex border-bottom-0">
                                    <img src="" class="me-2">
                                </td>
                                <td class="text-end pe-0 opacity-25
                                    border-bottom-0">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
